<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>lufei</title>
        <style>
            input[type=text],select{
                width: 100%;
                padding: 12px 20px;
                margin: 8px;
                display: inline-block;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
            }
            input[type=submit]{
                width: 100%;
                background-color: #4caf50;
                color: white;
                padding: 14px 20px;
                margin: 8px 0;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            input[type=submit]:hover{
                background-color: #45a049;
            }
            div{
                border-radius: 5px;
                background-color: #f2f2f2;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <h3>CSS渲染表单</h3>
        <div>
            <form action="/">
                <label for="fname"> FirstName:</label>
                <input type="text" id="fname" name="firstName" placeholder="your name...">

                <label for="lname"> LastName:</label>
                <input type="text" id="lname" name="lastName" placeholder="last name..">

                <label for="country">country:</label>
                <select name="country" id="country">
                    <option value="cn">CN</option>
                    <option value="us">US</option>
                    <option value="uk">UK</option>
                    
                </select>

                <input type="submit" value="提交">
            </form>
        </div>
    </body>
</html>